<script setup lang="ts">
import {  page } from "~/base/api/user";
import type { UseDialogExpose } from "@/hooks/useDialog.ts";
import type {
  MaProTableExpose,
  MaProTableOptions,
  MaProTableSchema,
} from "@mineadmin/pro-table";
import useDialog from "@/hooks/useDialog.ts";
import { useMessage } from "@/hooks/useMessage.ts";
import { ResultCode } from "@/utils/ResultCode.ts";
import {ref, Ref} from "vue";
import getSearchItems from "../data/getSearchItems.tsx";
const msg = useMessage();
const proTableRef = ref<MaProTableExpose>() as Ref<MaProTableExpose>;
const formRef = ref();
const ModelInfo = ref<any>({});
const selections = ref<any[]>([]);


// 弹窗配置
const maDialog: UseDialogExpose = useDialog({
  lgWidth: "850px",
  // 保存数据
  ok: ({ formType }, okLoadingState: (state: boolean) => void) => {
    okLoadingState(true);
    if (["importCard", "searchCard"].includes(formType)) {
      const elForm = formRef.value.maForm.getElFormRef();
      // 验证通过后
      elForm
        .validate()
        .then(() => {
          switch (formType) {
            // 导卡
            case "importCard":
              formRef.value
                .add()
                .then((res: any) => {
                  res.code === ResultCode.SUCCESS
                    ? msg.success('成功')
                    : msg.error(res.message);
                  maDialog.close();
                  proTableRef.value.refresh();
                })
                .catch((err: any) => {
                  msg.alertError(err);
                });
              break;
            // 查卡
            case "searchCard":
              formRef.value
                .edit()
                .then((res: any) => {
                  res.code === 200
                    ? msg.success('成功')
                    : msg.error(res.message);
                  maDialog.close();
                  proTableRef.value.refresh();
                })
                .catch((err: any) => {
                  msg.alertError(err);
                });
              break;
          }
        })
        .catch();
    }
    okLoadingState(false);
  },
});
// 保存
const submitInfo = () => {
};
// 暴露方法给父组件
defineExpose({
  maDialog
})

// 参数配置
const options = ref<MaProTableOptions>({
  // 表格距离底部的像素偏移适配
  adaptionOffsetBottom: 0,
  header: { show: false },
  // 表格参数
  tableOptions: {
    defaultExpandAll:false,
    treeProps:{ children: 'children', hasChildren: 'hasChildren' },
    on: {
      // 表格选择事件
      onSelectionChange: (selection: any[]) => (selections.value = selection),
    },
  },
  // 搜索参数
  searchOptions: { fold: false },
  // 搜索表单参数
  // searchFormOptions: { labelWidth: "90px" },
  // 请求配置
  requestOptions: {
    api: page,
  },
});
// 架构配置
const schema = ref<MaProTableSchema>({
  // 搜索项
  searchItems:getSearchItems() ,
  // 表格列
  tableColumns: [
    // 多选列
    { type: 'selection', showOverflowTooltip: false},
    // 普通列
    { label: '卡号', prop: 'id' },
    { label: '密码', prop: 'id' },
    { label: '优先出售', prop: 'id' },
    { label: '导入时间', prop: 'id' },
    { label: '进价备注', prop: 'id' },
    { label: '状态', prop: 'id' },
    // 操作列
    {
      type: 'operation',
      label:'操作',
      fixed: 'right',
      width: '80px',
      operationConfigure: {
        type: 'tile',
        actions: [
          {
            name: 'del',
            icon: 'mdi:delete',
            text: '删除',
            onClick: ({ row }, proxy: MaProTableExpose) => {},
          }
        ],
      },
    },

  ],
});



</script>

<template>

  <component :is="maDialog.Dialog">
    <template #default="{ formType, data }">
      <!-- 新增、编辑表单 -->
      <ma-form
        v-if="formType==='importCard'"
        ref="infoForm"
        v-model="ModelInfo"
        @ok="submitInfo"
        labelPosition="left"
        label-width="80"
        style="width: 640px"
      >
        <el-form-item label="卡密内容" prop="name">
          <el-input type="textarea" :rows="12" placeholder="卡密导入格式：
{激活码}
{激活码}
{激活码}

示例：
1000000111111520100021
1000000222222520100022
1049002333333520100023" v-model="ModelInfo.name" />
        </el-form-item>


        <el-form-item label="导入选项" prop="name">
          <el-checkbox-group v-model="ModelInfo.checkList">
            <el-checkbox label="判断卡密重复" value="1" />
            <el-checkbox label="优先出售本批" value="2" />
            <el-checkbox label="商品设为销售" value="3" />
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="每张成本" prop="name">
          <el-input v-model="ModelInfo.name" >
            <template #append>元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="过期时间" prop="name">
          <el-date-picker
            v-model="ModelInfo.value1"
            type="datetime"
            placeholder="不填则不会过期"
          />
        </el-form-item>

        <el-form-item label="导卡备注" prop="name">
          <el-input v-model="ModelInfo.name" />
        </el-form-item>


      </ma-form>

      <MaProTable
        v-if="formType==='searchCard'"
        ref="proTableRef"
        :options="options"
        :schema="schema"
        @search-submit="(form: any) => {
          console.log( JSON.stringify(form),'form搜索')
        }"
      >
        <template #toolbarLeft>
          <el-button type="primary">导出</el-button>
          <el-button type="danger">清空</el-button>
        </template>
      </MaProTable>
    </template>
  </component>
</template>

<style scoped lang="scss">
::v-deep .el-textarea__inner{
  line-height: 22px;
  resize: none;
  background-image: url("@/assets/images/web.png");
}
</style>
